<template>
  <!-- <a-drawer
    title="报文上传"
    placement="right"
    width="100%"
    class="fra-drawer fra-drawer-s"
    :closable="true"
    :mask="false"
    :visible="messageUploadVisible"
    @close="onClose"
  > -->

  <a-modal
    :mask-closable="false"
    :visible="messageUploadVisibleF"
    title="报文上传 - ACARS Uplink"
    :class="['c-dialog-box message-upload-box msg-gls',singlePage?'c-dialog-box-full':'']"
    :dialog-style="{height:'700px'}"
    :footer="null"
    :width="1100"
    :z-index="modalZIndexM"
    :closable="!singlePage"
    centered
    destroy-on-close
    @cancel="onClose"
  >

    <span slot="closeIcon" class="c-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>
    <span v-if="!singlePage" class="new-page-btn" @click="goNewPageHandler(muuuid)"><a-icon :component="require('@/assets/icon/newPage.svg')" /></span>

    <!-- info -->
    <a-spin :spinning="repUplinkMessageListLoading" class="c-dialog-search-box">
      <a-row class="c-dialog-search-box-2">
        <a-col :span="2">
          <div class="fw-b fs-12 color-r">机号</div>
          <a class="fs-16 fw-b numbers" @click="setState({key:'flightLegHistoryVisible',payload:true})">{{ currentRow.tailnumber||'--' }}</a>
        </a-col>
        <a-col :span="3">
          <div class="fw-b fs-12 color-r">机队</div>
          <div class="fs-16 fw-b color-title numbers">{{ currentRow.fleet ||'--' }}</div>
        </a-col>
        <a-col :span="4">
          <div class="fw-b fs-12 color-r">机场</div>
          <div class="fs-16 fw-b color-title numbers">
            <a @click="airportInfoHandler(currentRow.dep)">{{ currentRow.dep ||'--' }}</a>
            <span class="c-arrow color-s">····</span>
            <a @click="airportInfoHandler(currentRow.arr)">{{ currentRow.arr ||'--' }}</a>
          </div>
        </a-col>
        <a-col :span="5">
          <div class="fw-b fs-12 color-r">预计到达</div>
          <div class="fw-b fs-13">
            <span class="fs-16 color-title mr-4">{{ currentRow.eta? $moment.utc(currentRow.eta).format('YYYY-MM-DD HH:mm:ss') :'--' }}</span>

          </div>

        </a-col>
        <a-col :span="2" class="pt-10">
          <div class="text-c"><oooiSvg :step="oooiStep.step" :time="oooiStep.time" /></div>
        </a-col>
      </a-row>
    </a-spin>

    <!-- 报文上传 -->

    <a-card class="mt-12">
      <div class="text-color-21252E fs-14 fw-b  mb-12">报文上传</div>
      <a-form-model ref="ruleForm" :rules="uploadParamsRules" :model="uploadParams">
        <a-row type="flex" :gutter="24" class="mb-0">
          <a-col :span="showMsg.smi==='ENG'?8:12">
            <a-form-model-item label="" prop="provider">
              <div class="d-flex">
                <div class="flex-1">
                  <a-select
                    v-model="uploadParams.provider"
                    show-arrow
                    style="width: 100%;"
                    placeholder="上行地址"
                    allow-clear
                    disabled
                  >
                    <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
                    <a-select-option v-for="item in repUplinkDestination" :key="item.id" :value="item.name">
                      {{ item.title }}
                    </a-select-option>
                  </a-select>
                </div>
                <div class="ml-16">
                  <a-button type="primary" ghost @click="repUplinkDestinationHandler">
                    管理
                  </a-button>
                </div>
              </div>

            </a-form-model-item>
          </a-col>
          <a-col :span="showMsg.smi==='ENG'?12:12">
            <a-form-model-item label="" prop="uplinkRequest">
              <div class="d-flex">
                <div class="flex-1">
                  <a-select
                    v-model="uploadParams.uplinkRequest"
                    show-arrow
                    style="width: 100%;"
                    placeholder="上行模板"
                    allow-clear
                    @change="changeUplinkRequestHandler"
                  >
                    <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
                    <a-select-option v-for="item in repUplinkRequest" :key="item.id" :value="item.name">
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </div>
                <div class="ml-16">
                  <a-button type="primary" ghost @click="goUqlinkHandler">
                    管理
                  </a-button>
                </div>
              </div>

            </a-form-model-item>
          </a-col>
          <a-col v-if="showMsg.smi==='ENG'" :span="showMsg.smi==='ENG'?4:12">
            <a-form-model-item v-if="showMsg.smi==='ENG'" label="" prop="modifier" class="mu-custom-form-box">
              <a-select
                v-model="uploadParams.modifier"
                show-arrow
                placeholder="modifier"
                allow-clear
              >
                <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
                <a-select-option v-for="item in modifierArr" :key="item.name" :value="item.name">
                  {{ item.name }}
                </a-select-option>
              </a-select>
              <a-dropdown placement="bottomRight">
                <div slot="overlay" class="model-list-tips-btn-main">
                  <div>
                    <div>REAL—Requests a new real-time EICAS maintenance page, generated at the time the uplink request is received.</div>
                    <div>AUTO—Requests the most recent automatically generated EICAS maintenance page.</div>
                    <div>MAN—Requests the most recent pilot-generated EICAS maintenance page.</div>
                    <div>SUM—(787 only) Requests a summary of the EICAS maintenance pages currently stored on the airplane.</div>

                  </div>
                </div>
                <a-icon type="question-circle" />
              </a-dropdown>

            </a-form-model-item>
            <a-form-model-item />
          </a-col>
        </a-row>

        <div class="d-flex jc-between mt-8">
          <div class="text-color-21252E fs-14 lh-1 d-flex ai-end">
            <div v-if="showMsg.smi">
              <p class="mb-0 fw-b">{{ showMsg.smi }}</p>
              <p class="mb-0 fw-b">{{ replaceTmp('AN .{TailNo}') }}</p>
              <p class="fw-b wpp mb-0">{{ showMsg.message?'- '+showMsg.message:'' }}{{ modifierMsg }}</p>
              <!-- <p v-if="showMsg.smi==='ENG'" class="mb-0 fw-b">{{ showMsg.modifier }}</p> -->
            </div>

          </div>
          <a-button v-permission="1000" type="primary" class="mt-15" :loading="addRepUplinkMessageLoading" @click="addHandler">
            发送
          </a-button>
        </div>
      </a-form-model>
    </a-card>

    <!-- 上传记录（过去24小时） -->
    <div class="fs-14 text-color-21252E fw-b mt-26 mb-10">上传记录（过去24小时）</div>

    <a-spin :spinning="repUplinkMessageListLoading" class="c-dialog-main-box beauty-scroll">
      <a-row :gutter="12" class="width-change-box-ss">
        <a-col :span="repShow?12:24" class="left-menu-ss">
          <vxe-grid
            ref="xTable1"
            class="event-trigger-packet-upload"
            show-overflow
            highlight-hover-row
            :row-class-name="rowVxeClassHandler"
            :columns="reportColumns"
            :data="repUplinkMessageList"
            :height="vxeH"
            :sort-config="{trigger: 'cell'}"
            @cell-click="customRow"
          />

        </a-col>
        <dragAdjustWidth v-show="repShow" :style-loc="styleLoc" />
        <a-col v-if="repShow" :span="repShow?12:24" class="snapshot-data-main-box right-menu-ss">
          <a-tabs v-model="repTab" @change="changeTabHandler">
            <a-tab-pane key="1" tab="上行原文" />
            <a-tab-pane key="2" tab="下行原文" />
            <a-tab-pane key="3" tab="下行格式化数据" />
          </a-tabs>
          <div v-show="repTab==='1'" class="snapshot-data-s mu-s-box beauty-scroll">
            <div style="margin-top:-24px">
              {{ replaceTmp(repShowData.uplinkContent) }}
            </div>

          </div>
          <div v-show="repTab==='2'" class="snapshot-data-s mu-s2-box beauty-scroll">
            <div style="margin-top:-24px">
              {{ repShowData.responseContent }}
            </div>

          </div>
          <div v-show="repTab==='3'&&repShowData.responseId" class="snapshot-data-s beauty-scroll">
            <a-spin :spinning="repAnalysisJsonLoading" class="w-100">
              <div v-show="repShowData.smi!=='CFD'">
                <div v-html="htmlSourceCode" />
                <div v-html="repAnalysisJsonEnding" />
                <iframe v-show="false" id="rep-iframe-fd" frameborder="0" />
                <div v-show="false" v-html="repAnalysisJsonData" />
              </div>
              <div v-show="repShowData.smi==='CFD'">
                <div>
                  <div class="item-details-item-box">
                    <div>{{ cfdFormat[0]?cfdFormat[0].msgType:'--' }} = Report Type</div>
                    <div>{{ cfdFormat[0]&&cfdFormat[0].partNumber?cfdFormat[0].partNumber.join('，'):'--' }} = CMC or LDI Part Number</div>
                    <div>{{ cfdFormat[0]?cfdFormat[0].computorSource:'--' }} = CMC Computer Source</div>
                  </div>
                  <div>
                    <div v-for="item in tData" :key="item.id" class="cu-pointer" @click="(e)=>clickEvent(e,item)">

                      <a-row class="item-details-item-box">
                        <a-col :span="2">
                          <noticePriorityIcon :is-etops="item.isEtops" :priority="item.priority" :msg-type="item.name" />
                        <!-- <a-icon v-if="item.isEtops" :component="require('@/assets/icon/Fleet_Status_ETOPS.svg')" style="font-size:20px!important;vertical-align: top;" /> -->
                        <!-- <priorityIcon :priority="item.priority" /> -->
                        </a-col>
                        <a-col :span="2">
                          <span class="fs-15 mt-10 fw-b mr-10">{{ item.name }}</span>
                        </a-col>
                        <a-col :span="3">
                          <a class="fw-b">{{ item.code||'--' }}</a>
                        </a-col>
                        <a-col :span="11">
                          <a class="fw-b ">{{ item.description||'--' }}</a>
                        </a-col>
                        <a-col :span="4">
                          <div class="fs-14 fw-500">{{ item.msgTime? $moment.utc(item.msgTime).format('YYYY-MM-DD HH:mm') :'--' }}</div>
                        </a-col>
                        <a-col :span="2">
                          <div class="fw-b">{{ item.activity?activeHandler(item.activity):'--' }}</div>
                        </a-col>

                        <a-col v-for="ci in item.eventDetails" :key="ci.id" :span="24">
                          <a-row>
                            <a-col :offset="4" :span="14">
                              <div class="fs-13 text-over">
                                <span class="mr-10 fw-b">{{ ci.name||'--' }}</span>
                                <a>{{ ci.code ||'--' }}</a>
                                <span class="ml-10">{{ ci.intermittence||'--' }}{{ $isNull(ci.intermittenceNum)?'':`(${ci.intermittenceNum||'--'})` }}</span>
                                <span class="ml-10">飞行阶段：{{ ci.phase||'--' }}</span>
                                <div class="fs-12">{{ ci.description ||'事件名称未找到，请联系管理员' }}</div>
                                <div class="fs-12 d-flex">
                                  <span>Detected by：</span>
                                  <div>
                                    <div v-for="dbItem in ci.detectedBy" :key="dbItem">{{ dbItem }}</div>
                                  </div>
                                </div>
                                <div class="fs-12 "><span class="fw-b">Fault Report Code</span>：{{ ci.frc||'--' }}</div>
                                <div class="fs-12"><span class="fw-b">Monitor Code</span>：{{ ci.mc||'--' }}</div>
                              </div>
                            </a-col>
                            <a-col :span="4">
                              <div class="fs-14 fw-500">{{ ci.msgTime? $moment.utc(ci.msgTime).format('YYYY-MM-DD HH:mm') :'--' }}</div>
                            </a-col>
                            <a-col :span="2">
                              <div class="fw-b">{{ ci.activity?activeHandler(ci.activity):'--' }}</div>
                            </a-col>
                          </a-row>
                        </a-col>

                      </a-row>
                    </div>

                    <div class="wgwx-title mt-16 fs-14 fw-b mb-10">非关联的维护信息</div>
                    <div v-for="item in bData" :key="item.id" class="cu-pointer" @click="(e)=>clickEvent(e,item)">
                      <a-row class="item-details-item-box">
                        <a-col :span="2">
                          <noticePriorityIcon :is-etops="item.isEtops" :priority="item.priority" :msg-type="item.name" />
                        </a-col>
                        <a-col :span="22">
                          <a-row>
                            <a-col :span="2">
                              <span class="fs-15 mt-10 fw-b mr-10">{{ item.name }}</span>
                            </a-col>
                            <a-col :span="3">
                              <a class="fw-b">{{ item.code||'--' }}</a>
                            </a-col>
                            <a-col :span="5">
                              <span>{{ item.intermittence||'--' }}{{ $isNull(item.intermittenceNum)?'':`(${item.intermittenceNum||'--'})` }}</span>
                            </a-col>
                            <a-col :span="5">
                              <span>飞行阶段：{{ item.phase||'--' }}</span>
                            </a-col>
                            <a-col :span="4" :offset="3">
                              <div class="fs-14 fw-500">{{ item.msgTime? $moment.utc(item.msgTime).format('YYYY-MM-DD HH:mm') :'--' }}</div>
                            </a-col>
                            <a-col :span="2">
                              <div class="fw-b">{{ item.activity?activeHandler(item.activity):'--' }}</div>
                            </a-col>
                            <a-col :span="24">
                              <span class="fs-12 ">{{ item.description||'--' }}</span>
                            </a-col>
                            <a-col :span="24">
                              <div class="fs-12 d-flex">
                                <span>Detected by：</span>
                                <div>
                                  <div v-for="dbItem in item.detectedBy" :key="dbItem">{{ dbItem }}</div>
                                </div>
                              </div>
                            </a-col>
                            <a-col :span="24">
                              <div class="fs-12"><span class="fw-b">Fault Report Code</span>：{{ item.frc||'--' }}</div>
                              <div class="fs-12"><span class="fw-b">Monitor Code</span>：{{ item.mc||'--' }}</div>
                            </a-col>
                            <a-col v-for="ci in item.eventDetails" :key="ci.id" :span="24">
                              <a-row>
                                <a-col :offset="2" :span="16 ">
                                  <div class="fs-13 text-over">
                                    <span class="mr-10 fw-b">{{ ci.name||'--' }}</span><a>{{ ci.code ||'--' }}</a>
                                    <div>{{ ci.description ||'--' }}</div>
                                  </div>
                                </a-col>
                                <a-col :span="4">
                                  <div class="fs-14 fw-500">{{ ci.msgTime? $moment.utc(ci.msgTime).format('YYYY-MM-DD HH:mm') :'--' }}</div>
                                </a-col>
                                <a-col :span="2">
                                  <div class="fw-b">{{ ci.activity?activeHandler(ci.activity):'--' }}</div>
                                </a-col>
                              </a-row>
                            </a-col>

                          </a-row>
                        </a-col>
                      </a-row>

                    </div>

                  </div>

                </div>

              </div>
            </a-spin>
          </div>

        </a-col>
      </a-row>
    </a-spin>
    <gls :add-visible="addVisible" @close="closeAddhandler" />

  </a-modal>
  <!-- </a-drawer> -->
</template>

<script>
import oooiSvg from '@/pages/components/oooi';
import { mapState, mapActions, mapGetters, mapMutations } from 'vuex';
import { modifierArr } from '@/pages/common/constant.js';
import gls from './gls.vue';
import { toJSON, toHTML } from '@/utils/htmlParser';
import dragAdjustWidth from '@/pages/components/dragAdjustWidth';
export default {
  components: {
    oooiSvg,
    gls,
    dragAdjustWidth
  },
  props: {
    // currentRow: {
    //   type: Object,
    //   default: () => {}
    // },
    messageUploadVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      styleLoc: {
        box: 'width-change-box-ss',
        left: 'left-menu-ss',
        right: 'right-menu-ss'
      },
      htmlSourceCode: '',
      modalZIndexM: 2000,
      vxeH: '302px',
      currentRow: {},
      addTitle: '新增',
      addForm: {},
      responseId: -1,
      repTab: '1',
      activeIndex: [-1],
      repShow: false,
      repShowData: {},
      addRules: Object.freeze({
        name: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        isIdo: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isBedo: [
          { required: true, message: '请填写', trigger: 'change' }
        ]
      }),
      addVisible: false,
      addItemVisible: false,
      uploadParams: {
        modifier: undefined,
        uplinkRequest: undefined,
        provider: undefined
      },
      uploadParamsRules: {
        provider: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        uplinkRequest: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        modifier: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      muuuid: '',
      modifierArr,
      reportColumns: Object.freeze([
        {
          title: '发送时间',
          align: 'left',
          dataIndex: 'createTime',
          width: 170,
          slots: {
            default: ({ row }) => {
              return row.createTime ? this.$moment.utc(row.createTime).format('YYYY-MM-DD HH:mm:ss') : '--';
            }
          }

        },
        {
          title: '上行事件名称',
          align: 'left',
          dataIndex: 'ruleName',
          slots: {
            default: ({ row }) => {
              return row.ruleName || '--';
            }
          }
        },
        {
          title: '机号',
          align: 'left',
          dataIndex: 'tailnumber',
          width: 75,
          slots: {
            default: ({ row }) => {
              return row.tailnumber ? [<a onClick={(e) => this.visiableHandler(e, 'flightLegHistoryVisible')}>{row.tailnumber}</a>] : '--';
            }
          }

        },
        {
          title: '航班',
          align: 'left',
          dataIndex: 'flightNo',
          width: 75,
          slots: {
            default: ({ row }) => {
              return row.flightNo ? [<a onClick={(e) => this.visiableHandler(e, 'flightLegDetailsVisible')}>{row.flightNo}</a>] : '--';
            }
          }

        },
        {
          title: '上行地址',
          align: 'left',
          dataIndex: 'provider',
          width: 95,
          slots: {
            default: ({ row }) => {
              return row.provider || '--';
            }
          }
        },
        {
          title: '上行模板',
          align: 'left',
          dataIndex: 'uplinkRequest',
          slots: {
            default: ({ row }) => {
              return row.uplinkRequest || '--';
            }
          }
        }
      ])
    };
  },
  computed: {
    ...mapState('fraMonitoring', [
      'repUplinkDestination',
      'repUplinkRequest',
      'addRepUplinkMessageLoading',
      'repUplinkMessageListLoading',
      'repUplinkMessageList',
      'repUplinkDestinationList',
      'repUplinkDestinationLoading',
      'addRepUplinkDestinationLoading',
      'modalZIndex',
      'repAnalysisJsonData',
      'repAnalysisJsonEnding',
      'repAnalysisJsonLoading',
      'cfdFormat'
    ]),

    ...mapGetters('fraMonitoring', [
      'messageUploadVisibleF'
    ]),
    tData() {
      return this.cfdFormat.filter(item => {
        return item.name !== 'MMSG' && !(item.name === 'Alert' || item.eventType === 'Alert' || item.msgType === 'Alert') && item.code;
      });
    },
    bData() {
      return this.cfdFormat.filter(item => item.name === 'MMSG' && item.code);
    },
    modifierMsg() {
      return modifierArr.find(item => item.name === this?.uploadParams.modifier)?.format ?? '';
    },
    showMsg() {
      return this.repUplinkRequest.find(item => item.name === this.uploadParams?.uplinkRequest) ?? {};
    },
    oooiStep() {
      let step = 1;
      let time = '';
      const { outTime, offTime, onTime, inTime, phase, latestAcarsTime } = this.currentRow;
      if (inTime) {
        step = 5;
        time = this.$moment.utc(inTime).format('HH:mm');
      } else if (onTime) {
        step = 4;
        time = this.$moment.utc(onTime).format('HH:mm');
      } else if (phase === 'ER') {
        step = 3;
        time = latestAcarsTime ? this.$moment.utc(latestAcarsTime).format('HH:mm') : this.$moment.utc(offTime).format('HH:mm');
      } else if (offTime) {
        step = 2;
        time = this.$moment.utc(offTime).format('HH:mm');
      } else if (outTime) {
        step = 1;
        time = this.$moment.utc(outTime).format('HH:mm');
      }
      return { step, time };
    },
    singlePage() {
      return ((this.$route.meta?.singlePage ?? false) && this.$route.query.rp === 'messageUploadVisible');
    },
    muFlag() {
      return this.currentRow.outTime && !this.currentRow.inTime;
    }

  },
  watch: {
    'messageUploadVisibleF': {
      async handler(nv) {
        if (nv) {
          this.repShow = false;
          this.setState({ key: 'modalZIndex', payload: this.modalZIndex + 1 });
          this.modalZIndexM = this.modalZIndex;
          this.vxeH = this.singlePage ? `${document.body.clientHeight - 398}px` : '302px';

          this.muuuid = this.$route?.query?.muuuid ?? new Date().getTime();
          const lsRow = sessionStorage.getItem(`mu${this.muuuid}`) ?? localStorage.getItem('row');
          this.currentRow = JSON.parse(lsRow) ?? {};

          if (this.$store.state.setting.openType === '_blank' && !this.$route?.query?.muuuid) {
            this.goNewPageHandler(this.muuuid);
            this.setState({ key: 'messageUploadVisible', payload: false });
          } else {
            this.uploadParams = {
              modifier: undefined,
              uplinkRequest: undefined,
              provider: undefined
            };

            this.getMessageListHandler();
            await this.getUploadMessageConditions();
            this.uploadParams.provider = this.repUplinkDestination.find(item => item.title === 'Most Recent').name;
          }
        }
      },
      immediate: true
    },
    'uploadParams.modifier': {
      handler(nv) {
        this.$refs.ruleForm?.validateField('modifier');
      },
      deep: true
    },
    'uploadParams.uplinkRequest': {
      handler(nv) {
        this.$refs.ruleForm?.validateField('uplinkRequest');
      },
      deep: true
    },
    'uploadParams.provider': {
      handler(nv) {
        this.$refs.ruleForm?.validateField('provider');
      },
      deep: true
    }

  },

  methods: {
    ...mapActions('fraMonitoring', [
      'getUploadMessageConditions',
      'addRepUplinkMessage',
      'getRepUplinkMessageList',
      'getRepUplinkDestination',
      'updateRepUplinkDestination',
      'getUploadMessageConditionsPri',
      'deleteRepUplinkDestination',
      'addRepUplinkDestination',
      'repAnalysisJson',
      'getFormattedMessage'
    ]),
    ...mapMutations('fraMonitoring', [
      'setState'
    ]),

    // 点击行
    customRow({ row, rowIndex }) {
      if (this.activeIndex[0] === rowIndex) {
        this.repShow = false;
        this.activeIndex = [-1];
        // document.querySelector('.left-menu-ss').style.width = '50%';
      } else {
        this.repShow = true;
        this.activeIndex = [rowIndex];
        this.repShowData = { ...row };
        this.repShowData.uplinkContent = '\r\n' + row.uplinkContent;
        this.repShowData.responseContent = '\r\n' + row.responseContent;

        if (this.repTab === '3') {
          this.changeTabHandler();
        }
        this.$nextTick(() => {
          if (document.querySelector('.mu-s2-box').scrollTop) {
            document.querySelector('.mu-s2-box').scrollTop = 0;
          }
        });
        // this.$nextTick(() => {
        //   try {
        //     if (document.querySelector('.snapshot-data-s1')) {
        //       document.querySelector('.snapshot-data-s1').scrollTop = 0;
        //       const iframe = document.getElementById('rep-iframe');
        //       if (iframe && iframe.contentWindow) {
        //         iframe.contentWindow.document.body ? iframe.contentWindow.document.body.scrollTop = 0 : '';
        //         this.iframeScrollTop = 0;
        //       }
        //     }
        //   } catch (error) {
        //     //
        //   }
        // });
      }
    },
    async changeTabHandler() {
      if (this.repId !== this.repShowData.responseId) {
        if (this.repShowData.smi === 'CFD') {
          this.getFormattedMessage({ reportId: this.repShowData.responseId });
        } else {
          const { responseId, templateName, version } = this.repShowData;

          const params = {
            repReportId: responseId,
            templateName,
            templateType: 2,
            version
          };
          await this.repAnalysisJson(params);
          this.renderTMP();
        }
      }
      this.repId = this.repShowData.responseId;
    },
    renderTMP(listData) {
      const iframe = document.getElementById('rep-iframe-fd');
      // 先插入将html中的document.write执行获得完整html
      iframe.contentWindow.document.write(this.repAnalysisJsonData);
      // 根据完整html过滤script
      const htmljson = toJSON(document.getElementById('rep-iframe-fd').contentWindow.document.body.innerHTML, { skipScript: true, skipStyle: true, pureClass: false, pureComment: true });

      this.tmpHtml = htmljson;
      this.headCode = document.getElementById('rep-iframe-fd').contentWindow.document.head.innerHTML;
      // // 将iframe中dom 更新为完成html
      iframe.contentWindow.document.open();
      iframe.contentWindow.document.write(toHTML(htmljson));
      iframe.contentWindow.document.close();

      this.htmlSourceCode = document.getElementById('rep-iframe-fd').contentWindow.document.body.innerHTML;
    },
    // 确认上传
    addHandler() {
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          this.repShow = false;

          const params = {
            ...this.uploadParams,
            tailnumber: this.currentRow.tailnumber,
            flightNo: this.currentRow.flightNo,
            smi: this.showMsg.smi,
            legId: this.currentRow?.id ?? this.currentRow?.legId ?? '',
            uplinkContent: `${this.showMsg.message}${this.modifierMsg}`
          };
          await this.addRepUplinkMessage(params).then(rep => {
            if (rep.code === 500) {
              this.$message.warning(rep.message);
            } else {
              this.$message.success('操作成功');
              this.getMessageListHandler();
            }
          });
        } else {
          return false;
        }
      });
    },
    // 获取上传记录
    getMessageListHandler() {
      const params = {
        tailNumber: this.currentRow.tailnumber
      };
      this.getRepUplinkMessageList(params);
    },
    replaceTmp(tmp = '') {
      if (tmp) {
        return tmp.replace(/{TailNo}/, this.currentRow.tailnumber);
      } else {
        return '';
      }
    },
    visiableHandler(e, flag) {
      e.stopPropagation();
      this.setState({ key: flag, payload: true });
    },
    goUqlinkHandler() {
      this.$router.push({ name: '上行报文模板管理', query: { m: '1', bc: this.$router.currentRoute.name }});
      this.onClose();
    },
    repUplinkDestinationHandler() {
      this.addVisible = true;
    },
    changeUplinkRequestHandler(v) {
      const ur = this.repUplinkRequest.find(item => item.name === this.uploadParams?.uplinkRequest);
      if (ur.smi === 'ENG') {
        this.$set(this.uploadParams, 'modifier', 'REAL');
      } else {
        this.$set(this.uploadParams, 'modifier', undefined);
      }
    },
    delItemHandler({ id }) {
      this.deleteRepUplinkDestination(id).then((rep) => {
        if (rep) {
          this.getRepUplinkDestination();
        }
      });
    },
    airportInfoHandler(code) {
      this.setState({ key: 'airportInfoVisible', payload: true });
      localStorage.setItem('apInfoCode', code);
    },
    addConfirmHandler() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.addForm.id) {
            this.updateRepUplinkDestination(this.addForm).then((rep) => {
              if (rep) {
                this.addItemVisible = false;
                this.cancelHandler();
                this.getRepUplinkDestination();
              }
            });
          } else {
            this.addRepUplinkDestination(this.addForm).then((rep) => {
              if (rep) {
                this.addItemVisible = false;
                this.cancelHandler();
                this.getRepUplinkDestination();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    // 修改预赋值
    modifyHandler(row) {
      this.addItemVisible = true;
      this.addForm = { ...row };
      this.addTitle = '修改';
    },
    clickEvent(e, eItem) {
      this.setState({ key: 'eventDetailsVisible', payload: true });
      const currentRow = { event: { ...this.currentRow, ...eItem }, ...this.currentRow };
      localStorage.setItem('eRow', JSON.stringify(currentRow));
    },
    cancelHandler() {
      this.addForm = {};
      this.addTitle = '新增';
      this.$refs.addForm.resetFields();
    },
    // 当drawer点击关闭
    onClose() {
      this.repShowData = {};
      this.activeIndex = [-1];
      this.$emit('close', 'messageUploadVisible');
    },
    closeAddhandler(visi) {
      this.addVisible = visi;
    },
    rowVxeClassHandler({ rowIndex }) {
      const className = [];
      (this.activeIndex[1] || this.activeIndex[0]) === rowIndex
        ? className.push('active-row-c')
        : className.push('active-row-n');
      return className;
    },
    goNewPageHandler(muuuid = '') {
      sessionStorage.setItem(`mu${muuuid}`, JSON.stringify(this.currentRow));

      const routeData = this.$router.resolve({
        path: '/reportsLayout',
        query: {
          rp: 'messageUploadVisible',
          muuuid
        }
      });

      window.open(routeData.href, '_blank');
    }
  }
};
</script>

<style lang="less">
@import "../../index.less";

.message-upload-box{
  .ant-card-body{
    padding:12px 16px!important;
  }
  .ant-select,.ant-btn{
    vertical-align: top;
  }
  .ant-form-item{
    margin-bottom: 0!important;
  }
  .mt-12{
    margin-top: 12px!important;
  }
.snapshot-data-main-box {
  height: 100% !important;
  position: absolute !important;
  right: 0 !important;
    display: flex;
  flex-direction: column;
  .snapshot-data-s {

    line-height: normal;
    flex: 1;
    // max-height: 336px;
    background-color: #fff;
    overflow-y: auto;
    padding: 8px;
    margin-bottom: 0!important;
  }
  /deep/.ant-tabs {
    .ant-tabs-top-bar {
      margin-bottom: 8px !important;
    }
    .ant-tabs-tab {
      margin-right: 12px;
    }
  }
}

}
  .msg-gls{
    .ant-form-horizontal{
      overflow: hidden!important;
    }
  }
  .width-change-box-ss {
  display: flex !important;
  align-items: center !important;
}
.left-menu-ss.ant-col-24 {
    width: 100% !important;
}
.mu-custom-form-box{
  .ant-form-item-children{
    display: flex;
    align-items: center;
    column-gap: 12px;
  }
}
</style>
